<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>1.引出生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- <h2 :style="{opacity:a}">日学好难学怎么办?</h2> -->
        <h2 :style="{opacity}">日学好难学怎么办?</h2>
        <button @click="death">不活了</button>
    </div>

    <script>
        new Vue({
            el: '#root',
            data: {
                opacity: 0.5
            },
            methods: {
                death(){
                    // 移除所有状态的监听.
                    //所谓的销毁,vm还在,vm不再管理root中的数据了,数据的监听也没了
                   this.$destroy() 
                }
            },
            mounted(){
                //Vue实例挂载完毕
                this.timer = setInterval(() => {
                    console.log('定时器的回调函数正在执行...');
                    this.opacity -= 0.01
                    if(this.opacity <= 0) this.opacity = 1
                }, 16);
            },
            //vm将要销毁
            beforeDestroy() {
                clearInterval(this.timer)
            }
        })
    </script>
</body>
</html>